<template>
  <div>
    <el-autocomplete
      class="inline-input"
      clearable
      v-model="stationName"
      :fetch-suggestions="StationQuerySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @change="change"
    ></el-autocomplete>
  </div>
</template>

<script>
import { querystations } from "@/api/order/refundList";

export default {
  data() {
    return {
      stationName: "",
      stationList: [],
    };
  },
  mounted() {
    this.getStationList();
  },
  methods: {
    change(val) {
      console.log(val);
    },
    StationQuerySearch(queryString, cb) {
      var restaurantsStation = this.stationList;
      var results = queryString
        ? restaurantsStation.filter(this.StationCreateFilter(queryString))
        : restaurantsStation;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    StationCreateFilter(queryString) {
      return (v) => {
        return v.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    getStationList() {
      querystations().then((res) => {
        if (res.code == 200) {
          var arr = [];
          res.data.forEach((item) => {
            arr.push({ value: item.stationName });
          });
          this.stationList = arr;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>